<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>菜单授权管理</title>
  <meta th:include="~{layout/head_xadmin :: content}">
</head>
<body>
<div class="x-nav" style="background-color: white;">
          <span class="layui-breadcrumb">
            <a href="/admin">首页</a>
            <a href="#">权限管理</a>
            <a>
              <cite>菜单授权管理</cite></a>
          </span>
  <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
    <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>

<div class="layui-row layui-col-space5">
  <div class="layui-col-md4" style="padding: 20px 20px; font-size: 16px;">
    <div class="layui-row">
      当前选中：<b id="this-click" style="color: red;"></b>
    </div>
    <div class="layui-row">
      <div id="tree-menu"></div>
    </div>
  </div>
  <div class="layui-col-md8">
    <div class="layui-col-md12" style="border-left: 2px solid red;padding: 15px 5px">

      <div id="menu-permission"></div>
      <br>
      <button class="layui-btn layui-btn-normal" onclick="update()">保存提交修改</button>
      <br><br>
      <hr>
      <p>
        规则：最底层菜单A包含改角色XX时，如果菜单A的父菜单B没有包含该角色XX时，角色XX亦不会显示菜单A
      </p>
    </div>
  </div>
</div>


</body>
<script>
  var transfer, roleList, mid = -1
  layui.use(['tree', 'transfer', 'layer', 'jquery'], function () {
    var tree = layui.tree;
    var layer = layui.layer;
    var $ = layui.jquery;
    transfer = layui.transfer;

    $(function () {
      $.ajax({
        data: {"status": 1},
        url: '/admin/menu/tree',
        success: function (data) {
          //加一级根目录
          var tr = listToTree(data.data, -1)
          //渲染
          var inst1 = tree.render({
            elem: '#tree-menu'  //绑定元素
            , data: tr
            , onlyIconControl: true  //是否仅允许节点左侧图标控制展开收缩
            , click: function (obj) {
              $('#this-click').html(obj.data.title)
              if (obj.data.pid == -1) {
                mid = -1
              } else {
                mid = obj.data.id
              }
              info(obj.data.id)
            }
          });
        }
      });
      //获取角色列表
      $.ajax({
        url: '/admin/role/all',
        success: function (data) {
          roleList = data.data
          //渲染
          transfer.render({
            elem: '#menu-permission'  //绑定元素
            , title: ['角色列表', '已授权角色列表']
            , showSearch: true
            , width: 300
            , data: roleList
            , parseData: function (res) {
              return {
                "value": res.id //数据值
                , "title": res.name //数据标题
                , "disabled": ""  //是否禁用
                , "checked": "" //是否选中
              }
            }
            , id: 'transferId' //定义索引
          });
        }
      })
    })
  });

  function info(id) {
    $.ajax({
      data: {"menuId": id},
      url: '/admin/menu/permissionInfo',
      success: function (data) {
        if (data.data.length > 0) {
          let arr = new Array(data.data.length)
          for (let i = 0; i < data.data.length; i++) {
            arr.push(data.data[i].roleId)
          }
          //可以重载所有基础参数
          transfer.reload('transferId', {
            data: roleList,
            value: arr
          });
        } else {
          transfer.reload('transferId', {
            data: roleList,
            value: []
          });
        }
      }
    })
  }

  function update() {
    if (mid == -1) {
      layer.msg('不能选择根目录修改！')
      return;
    }
    var data = transfer.getData('transferId');
    let roleIds = []
    for (let i = 0; i < data.length; i++) {
      roleIds.push(data[i].value)
    }
    $.ajax({
      data: {"menuId": mid, "roleIds": roleIds.length > 0 ? roleIds.toString() : null},
      url: '/admin/menu/updatePermission',
      type: 'post',
      success: function (data) {
        layer.msg(data.message)
      }
    })
  }

  function listToTree(list, pid) {
    return list.filter(item => {
      if (item.pid === pid) {
        item.children = listToTree(list, item.id)
        return true
      }
      return false
    })
  }
</script>
</html>
